<template>
  <div>
    <div class="menuAuth">
      <header class="d-flex justify-content-between">
        <div class="left d-flex">
          <t-input v-model="formItem.menuName" icon="magnify" placeholder="菜单名称/菜单ID" clearable>
          </t-input>
          <t-button icon="filter-variant" @click="addSearch"></t-button>
        </div>
        <div class="right">
          <t-button type="primary" icon="plus-circle-outline" @click="add">新增菜单</t-button>
          <t-dropdown :visible="visible" trigger="custom">
            <t-button type="outline-secondary" icon="view-parallel" @click="showMenuList"></t-button>
            <t-dropdown-menu slot="list" style="padding: 10px 20px;">
              <t-checkbox-group v-model="selectedMenu" vertical @on-change="change">
                <t-checkbox v-for="(item,index) in menuList" :label="item" :key="index"></t-checkbox>
              </t-checkbox-group>
              <t-checkbox
                :indeterminate="indeterminate"
                v-model="checkAll"
                @click.prevent.native="handleCheckAll">全选
              </t-checkbox><br>
              <t-button type="primary" style="margin:10px;" @click="menuConfirm">确定</t-button>
            </t-dropdown-menu>
          </t-dropdown>
        </div>
      </header>
      <div v-show="ifShow" class="search">
        <div class="d-flex condition">
          <div>
            <p>菜单状态</p>
            <t-select v-model="formItem.state" placeholder="请选择" clearable>
              <t-option v-for="(item, index) in stateList" :key="index" :value="item.value">
                {{ item.label }}
              </t-option>
            </t-select>
          </div>
          <div>
            <p>菜单地址</p>
            <t-input v-model="formItem.menuUrl" placeholder="请输入" clearable></t-input>
          </div>
          <!-- <div>
            <p>创建时间</p>
            <t-date-picker v-model="formItem.createDate"
                           type="dateRange"
                           clearable
                           placeholder="请选择"
            ></t-date-picker>
          </div> -->
        </div>
        <div class="button d-flex justify-content-end">
          <t-button type="primary" @click="search">查询</t-button>
          <t-button style="margin-left:10px;" @click="reset">重置</t-button>
        </div>
      </div>
      <t-table :columns="columns" :data="data" :all-ellipsis="true" :no-data-text="noData" line style="margin-top:5px;">

      </t-table>
      <div class="page d-flex justify-content-between align-items-center">
        <span>共{{ pagination.total }}条</span>
        <t-pager :total="pagination.total" :current.sync="pagination.currentPage" :page-size.sync="pagination.size" :sizer-range="pagination.sizes"
                 show-elevator show-sizer
                 @on-size-change="onSizeChange"
                 @on-change="onChange"></t-pager>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import MenuOperation from './MenuOperation.vue'
export default {
  data() {
    return {
      columns: [
        {
          title: '菜单ID',
          key: 'ID'
        },
        {
          title: '菜单名称',
          key: 'NAME'
        },
        {
          title: '菜单地址',
          key: 'VIEWNAME'
        },
        {
          title: '菜单图标',
          key: 'FUNC_IMG'
        },
        {
          title: '菜单排序',
          key: 'FUN_SEQ'
        },
        {
          title: '模块编号',
          key: 'MODULE_CODE'
        },
        {
          title: '状态',
          key: 'STATE',
          render: (h, params) => {
            const state = params.row.STATE === 0 ? '禁用' : '启用'
            return h('span', state)
          }
        },
        {
          title: '操作',
          width: '120px',
          render: (h, params) => {
            return h(MenuOperation, {
              props: {
                auth: params.row
              },
              on: {
                deleteSuccess: () => {
                  this.getMenuList()
                }
              }
            })
          },
          fixed: 'right'
        }
      ],
      indeterminate: false,
      checkAll: true,
      obj: {},
      data: [],
      noData: "<img src='/static/images/noData.png'><p style='margin-top:10px;'>查询无数据</p>",
      formItem: {
        menuName: '',
        menuUrl: '',
        state: '',
        createDate: ''
      },
      stateList: [
        {
          value: 0,
          label: '禁用'
        },
        {
          value: 1,
          label: '启用'
        }
      ],
      ifShow: false,
      visible: false,
      selectedMenu: ['菜单ID', '菜单名称', '菜单地址', '菜单图标', '菜单排序', '模块编号', '状态'],
      pagination: {
        currentPage: 1,
        sizes: [10, 15, 20],
        size: 10,
        total: 0
      },
      menuList: ['菜单ID', '菜单名称', '菜单地址', '菜单图标', '菜单排序', '模块编号', '状态']
    }
  },
  computed: {
    ...mapState({
      modulecode: state => state.authManage.moduleCode
    })
    // moduleCode() {
    //   return this.$store.getters.moduleCode
    // }
  },
  watch: {
    modulecode() {
      this.getMenuList()
    },
    $route(to) {
      if (to.name === 'usermanage/auth') {
        this.getMenuList()
      }
    }
  },
  created() {
    this.getMenuList()
    this.obj = [...this.columns]
  },
  methods: {
    add() {
      if (this.modulecode === '') {
        this.$Message.danger('请选择左边一个业务模块')
      } else {
        console.log(this.$router)
        console.log(this.$router.push)
        this.$router.push('/usermanage/auth/addAndEdit/' + this.modulecode)
      }
    },
    // 全选
    handleCheckAll (val) {
      if (this.indeterminate) {
        this.checkAll = false
      } else {
        this.checkAll = !this.checkAll
      }
      this.indeterminate = false
      if (this.checkAll) {
        this.selectedMenu = this.menuList
      } else {
        this.selectedMenu = []
      }
    },
    getMenuList() {
      this.http.$http.post(this.services.QUERY_MENU_LIST, {
        bo: 'user',
        bc: 'USER_FUNCTION',
        condition: JSON.stringify({
          IDNAME: {
            cond_type: 'OR',
            NAME: {
              cond_type: 'LIKE',
              value: this.formItem.menuName,
              name: 'NAME'
            },
            ID: {
              cond_type: '=',
              value: this.formItem.menuName,
              name: 'ID'
	          }
          },
          MODULE_CODE: {
            cond_type: 'LEFT LIKE',
            value: this.modulecode,
            name: 'MODULE_CODE'
          },
          FUNC_TYPE: {
            cond_type: '=',
            value: 'H',
            name: 'FUNC_TYPE'
          },
          STATE: {
            cond_type: '=',
            value: this.formItem.state,
            name: 'STATE'
          },
          VIEWNAME: {
            cond_type: '=',
            value: this.formItem.menuUrl,
            name: 'VIEWNAME'
          }
        }),
        order_by: JSON.stringify([{ ORDER_TYPE: 'DESC', NAME: 'ID' }]), // 排序
        begin: (this.pagination.currentPage - 1) * this.pagination.size,
        row: this.pagination.size
      }).then(res => {
        this.data = res.data.RESULT.DATALIST
        this.pagination.total = res.data.RESULT.TOTAL_CNT
      })
    },
    // 搜索
    search() {
      this.getMenuList()
    },
    // 显示新增搜索条件
    addSearch() {
      this.ifShow = !this.ifShow
    },
    // 显示菜单列表
    showMenuList() {
      this.visible = true
    },
    // 自定义表单列表
    menuConfirm() {
      this.columns = [...this.obj]
      let difference = this.menuList.concat(this.selectedMenu).filter(v => this.menuList.includes(v) && !this.selectedMenu.includes(v)) // 获取数组差集
      for (const v of difference) {
        for (const v1 of this.columns) {
          if (v === v1.title) {
            const index = this.columns.indexOf(v1)
            this.columns.splice(index, 1)
          }
        }
      }
      this.visible = false
    },
    // 重置表单
    reset() {
      this.formItem = {
        menuName: '',
        menuUrl: '',
        state: '',
        createDate: ''
      }
      this.getMenuList()
    },
    // 复选框状态改变
    change(val) {
      this.indeterminate = val.length < this.menuList.length
    },
    onSizeChange(val) {
      this.pagination.size = val
      this.getMenuList()
    },
    onChange(val) {
      this.pagination.currentPage = val
      this.getMenuList()
    }
  }
}
</script>
<style lang="scss" scoped>
.menuAuth {
  padding: 20px 0;
  header {
    .left {
      input {
        width: 300px;
      }
      .btn {
        margin-left: 10px;
      }
    }
  }
  .search {
    background: #F8F9FA;
    padding: 10px 30px;
    margin: 5px 0 10px;
    .condition {
      > div {
        flex: 1;
        padding: 0 10px;
        p {
          margin: 0 0 3px 0;
        }
     }
    }
    .button {
      margin-top: 10px;
      .btn {
        width: 96px;
      }
    }
  }

  .page {
    margin-top: 20px;
  }
}
</style>

